<template>
  <Page name="向商家付钱" :loading="loading" theme="white">
    <div class="page-pay-wrap">
      <div class="code-box">
        <div @click="showBarCode">
          <p class="paycode" v-if="info.pay_code">{{info.pay_code.substr(0,3)}} **** 点击查看付款码数字</p>
          <div class="barcode" v-if="info.barcode">
            <img :src="`data:image/png;base64,${info.barcode}`">
          </div>
        </div>
        <div class="qrcode" v-if="info.qrcode" @click="getPayCode">
          <img :src="`data:image/png;base64,${info.qrcode}`">
          <!-- <div class="avatar">
            <img v-if="avatar" :src="avatar" class="avatar">
            <img v-else src="~assets/img/ic_mine_profile.png">
          </div> -->
        </div>

        <div class="paytype fx fx-vc fx-between">
          <p class="label">付款方式</p>
          <p class="fx fx-vc fx-between" @click="showActionSheet = true">
            <span class="type">{{payTypeText}}</span><i class="arrow"></i>
          </p>
        </div>

        <!-- <div class="paytip fx fx-vc">
          <i class="ic ic-tip-yellow mr12"></i>
          <p class="flex">如付款失败，请尝试使用其他支付方式</p>
        </div> -->
      </div>
    </div>

    <div class="show-bar-code" v-if="barCodeBox.show">
      <div class="wrap" :style="barCodeBox.style">
        <div class="content fxv-center "  @click="hideBarCodeBox">
          <div class="code fx-center">
            <span>{{info.pay_code.substr(0,4)}}</span>
            <span>{{info.pay_code.substr(4,4)}}</span>
            <span>{{info.pay_code.substr(8,4)}}</span>
            <span>{{info.pay_code.substr(12)}}</span>
          </div>
          <div class="bar fx-center">
            <img :src="`data:image/png;base64,${info.barcode}`">
          </div>
          <div class="label fx-center">提示：付款码数字仅用于支付时向收银员展示，请勿泄露以防诈骗</div>
        </div>
        <div class="modal fxv-center" v-if="barCodeBox.tip" @click="barCodeBox.tip = false">
          <p>付款码数字仅用于支付时向收银员展示请勿泄露以防诈骗</p>
          <span class="btn btn-primary">我知道了</span>
        </div>
      </div>
    </div>

    <ActionSheet
      v-if="showActionSheet"
      title="选择优先支付方式"
      tip="优先使用所选付款方式,如付款失败将尝试使用其他付款方式完成付款"
      :list="pay_ids"
      :value="pay_id"
      @close="showActionSheet = false"
      @select="selectHandle" />
  </Page>
</template>

<script>
/**
 * 支付码有效期为60s
 * 定时刷新接口
 */
import Page from '~/components/page'
import ActionSheet from '~/components/ActionSheet';

export default {
  components: {
    Page,
    ActionSheet,
  },
  async asyncData({ app, query, store}){

    //付款顺序
      let pay_seq = store.state.paySeq;
      let pay_ids;
      let pay_id;
      if(!pay_seq || !pay_seq.pay_ids){
        await store.dispatch('GET_PAY_SEQ');
      }
      //重组适合actionsheet的数组
      pay_ids = store.state.paySeq.pay_ids.map(item=>{
        let rs = {
          value:item.key,
          label:item.text,
        }
        if(item.status == '0'){
          rs.disabled = true;
          rs.disabledText = '暂未开通'
        }
        return rs
      })

      //获取第一个激活的选中状态
      let item = store.state.paySeq.pay_ids.find(item=>item.status == '1');
      if(item){
          pay_id = item.key
      }else{
        pay_id = '1'
      }

      return {
        pay_ids:pay_ids,
        pay_id,
      }
  },
  data(){
    return {
      time:15,
      timeHandle:false, // 获取验证码定时器
      loading:false,
      info:{}, // 存储接口返回的数据
      avatar:'', //用户头像
      barCodeBox:{ //条形码视图宽高
        show:false,
        tip:true,
        style:{
          width:'100%',
          height:'100%',
        }
      },

      showActionSheet: false,
    }
  },
  computed:{
    payTypeText(){
      let text = '';
      this.pay_ids.some(item=>{
        if(item.value == this.pay_id){
          text = item.label;
        }
      })
      return text
    }
  },
  async mounted(){
    document.documentElement.classList.add('bg-primary')
    //加载图片成功则显示
    // if(this.$store.state.user.avatar){
    //   let img = new Image;
    //   img.src = this.$store.state.user.avatar;
    //   img.onload = ()=>{
    //     this.avatar = this.$store.state.user.avatar;
    //   }
    // }
   // 获取付款码
    await this.getPayCode();

    // setTimeout(()=>{
    //   this.$router.push({name:'pay-confirm',query:{id:'125',type:'pay_code'}});
    // },5000);
  },
  destroyed(){
    document.documentElement.classList.remove('bg-primary');
    if(this.timeHandle) clearTimeout(this.timeHandle);
  },
  methods:{
    async getPayCode(){ // 获取付款码
      try{
        if(this.loading) return false;
        if(this.timeHandle) clearTimeout(this.timeHandle);

        this.loading = true;
        // this.$nuxt.$loading.start();
        let { data: rs } = await this.$axios.post('?ct=api&ac=pay_code');
        if(rs.code == 0){
          this.info = rs.data;

          // 设置定时器自动刷新
          this.timeHandle = setTimeout(async ()=>{
            await this.getPayCode();
          },this.time * 1000)
        }else{
          this.$toast(rs.msg);
        }
      }catch(e){
        this.$error(e);
      }
      this.loading = false;
      // this.$nuxt.$loading.finish()
    },
    showBarCode(){ //全屏展示条形码
      const { innerWidth, innerHeight, lib } = window;
      this.barCodeBox.style = {
        width: `${lib.flexible.px2rem(innerHeight)}rem`,
        height:`${lib.flexible.px2rem(innerWidth)}rem`,
        top: `${lib.flexible.px2rem((innerHeight-innerWidth)/2)}rem`,
        left: `${lib.flexible.px2rem(0-(innerHeight-innerWidth)/2)}rem`,
        transform: 'rotate(90deg)',
        transformOrigin: '50% 50%',
      }

      this.$nextTick(()=>{
        this.barCodeBox.show = true;
      })
    },
    hideBarCodeBox() {
      this.barCodeBox.show = false;
      this.barCodeBox.tip = true;
    },
    selectHandle(item){
      if(item.link){
        this.$store.commit('elsepay/setForm',this.order);
      }else{
        this.pay_id = item.value
      }
    }
  }
}
</script>

<style lang="less" scoped>
  .page-pay-wrap {
    padding:32px 0 50px;
    background-color:#2086f9;
  }
  .code-box {
    margin:0 30px;
    padding-top:116px;
    border-radius:10px;
    box-shadow: 0 10px 30px 0 rgba(32,134,249,.3);
    background-color:#fff;
    background-image: url('~assets/img/pay-top.png');
    background-position: top center;
    background-size:100%;
    background-repeat: no-repeat;

    .paycode {
      padding:0 20px;
      text-align: center;
      font-size:28px;
      color:#999;
      .text-ellipsis();
    }
    .barcode {
      img {
        margin:20px auto 0;
        display:block;
        width:540px;
        height:156px;
      }
    }
    .qrcode {
      position: relative;
      margin:84px auto 64px;
      display:block;
      width: 300px;
      height:300px;
      overflow: hidden;
      img {
        display:block;
        width: 100%;
        height:100%;
      }
      .avatar {
        position: absolute;
        top:50%;
        left:50%;
        transform: translate(-50%,-50%);
        width:68px;
        height: 68px;
        padding:4px;
        background-color: #fff;
        overflow: hidden;
        border-radius: 10px;
      }
    }
    .paytype {
      padding:30px;
      .label {
        font-size:32px;
        color:#666;
      }
      .type {
        font-size:30px;
        color:#292929;
      }
      .arrow {
        margin-left:20px;
        display: block;
        width:16px;
        height:16px;
        border-right:1px solid #999;
        border-bottom:1px solid #999;
        transform: rotate(-45deg);
      }
    }

    .paytip {
      padding:34px 30px;
      border-top:1px solid #ededf0;
      p {
        .text-ellipsis();
        font-size:24px;
        color:#d39b00;
      }
    }
  }
  .show-bar-code {
    position: fixed;
    top:0;
    left:0;
    bottom:0;
    right:0;
    z-index:19881122; //要高过top-header的z-indexs
    background-color:#fff;
    .modal,.wrap {
      position: absolute;
    }
    .wrap {
      .content {
        height:100%;
        .code {
          font-size:42px;
          color:#292929;

          span + span {
            margin-left:60px;
          }
        }
        .bar {
          margin:30px auto 60px;
        }
        .label {
          color:#d39b00;
          font-size:24px;
        }
      }
    }

    .modal {
      top: 0;
      left:0;
      width: 100%;
      height:100%;
      z-index:2;
      background-color:rgba(255,255,255,.96);

       p {
         width:542px;
         text-align: center;
         font-size:32px;
         line-height: 54px;
         color:#292929;
       }
       span {
         width:300px;
         margin-top:70px;
       }
    }
  }
</style>
